<template>
  <div class="previewReport">
    <div class="pdf" id="pdfDom">
      <div class="pdf-header">
        <h1>{{statisticsInfo.template.headerBig}}</h1>
        <p>(第{{statisticsInfo.template.reportCode}}期)</p>
        <div class="headerLine">
          <span>{{statisticsInfo.template.reportUnit}}</span>
          <span>{{statisticsInfo.template.reportTime}}</span>
        </div>
      </div>
      <div class="pdf-content">
        <div class="content-first">
          <h3>一、基本情况</h3>
          <div class="baseDescribe">
            海南省森林火情监测系统自
            <span>{{statisticsInfo.contentInfo.startTime}}</span>至
            <span>{{statisticsInfo.contentInfo.endTime}}</span>，共监测到
            <span>{{statisticsInfo.contentInfo.fireNum}}</span>起火情。其中：
          </div>
          <div class="firstItem" v-for="(itemA, indexA) of statisticsInfo.tableList" :key="indexA">
            <h4>{{itemA.title1}}</h4>
            <!-- <p>{{itemA.title2}}（{{statisticsInfo.contentInfo.startTime}}-{{statisticsInfo.contentInfo.endTime}}）</p> -->
            <div class="tableBox">
              <el-table
                class="elTable"
                :data="itemT"
                v-for="(itemT, indexT) of itemA.data"
                :key="indexT">
                <el-table-column
                  label="序号"
                  type="index"
                  :index='(index)=>{return (index+(indexT*itemA.step)+1)}'>
                </el-table-column>
                <el-table-column
                  v-for="(itemTheader, indexTheader) of itemA.therader"
                  :key="indexTheader"
                  :prop="itemTheader.prop"
                  :label="itemTheader.label">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="content-second" v-show="true">
          <h3>二、火情核实情况</h3>
          <div class="secondItem" v-for="(itemInfo, indexInfo) of statisticsInfo.fireInfoList" :key="indexInfo">
            {{itemInfo.observeTime}}，位于{{itemInfo.place}}（坐标：{{itemInfo.longitude}}°E，{{itemInfo.latitude}}°N），监测预判为{{itemInfo.vegType}}火灾，{{itemInfo.checkDesc ? itemInfo.checkDesc : "未核实"}}；
          </div>
          <div class="secondItem" v-if="statisticsInfo.fireInfoList.length == 0">{{statisticsInfo.contentInfo.startTime}}至{{statisticsInfo.contentInfo.endTime}}未发现火情</div>
        </div>
        <div class="content-third">
          <h3>三、火灾防控建议</h3>
          <div class="thirdItem" v-if="statisticsInfo.suggest.timeTop.length > 0 || statisticsInfo.suggest.placetop.length > 0 || statisticsInfo.suggest.typeTop.length > 0">
            <p class="describe">
              <span>系统监测到</span>
              <span v-if="statisticsInfo.suggest.timeTop.length > 0">{{statisticsInfo.suggest.timeTop[0]}}时间段疑似发生{{statisticsInfo.suggest.timeTop[1]}}起火情，建议指挥中心相关人员在此时间段加强火情核查工作;</span>
              <span v-if="statisticsInfo.suggest.placetop.length > 0">{{statisticsInfo.suggest.placetop[0]}}疑似共发生{{statisticsInfo.suggest.placetop[1]}}起火情，建议{{statisticsInfo.suggest.placetop[0]}}应急管理局加强火情核实与火灾防控工作;</span>
              <span v-if="statisticsInfo.suggest.typeTop.length > 0">全省疑似共发生{{statisticsInfo.suggest.typeTop[1]}}起{{statisticsInfo.suggest.typeTop[0]}}火情，建议加强{{statisticsInfo.suggest.typeTop[0]}}防灭火工作。</span>
            </p>
            <!-- <p class="remark">建议加强森林火情监测服务系统侦测火点的复核工作。</p>
            <p class="remark">建议森林防火部成员单位继续加强督导检查工作。</p> -->
            <p class="remark">{{statisticsInfo.suggestText}}</p>
          </div>
          <div class="secondItem" v-if="statisticsInfo.fireInfoList.length == 0"><p>{{statisticsInfo.contentInfo.startTime}}至{{statisticsInfo.contentInfo.endTime}}未发现火情</p></div>
        </div>
      </div>
      <div class="pdf-footer">
        <div class="footerLine">
          <span>{{statisticsInfo.template.reporterUnit}}</span>
          <span>编辑：{{statisticsInfo.template.reporter}}</span>
        </div>
      </div>
    </div>
    <div class="funcBtn">
      <p @click="getPdf()" :style="{cursor:countDown > 0 ? 'not-allowed' : 'pointer'}">
        <img class="mouseout" src="/images/fireReport/icon/xiazai.png" alt="">
        <img class="mousein" src="/images/fireReport/icon/xiazai2.png" alt="">下载<span v-show="countDown > 0">({{countDown}})</span>
      </p>
      <p @click="closePreview()">
        <img class="mouseout" src="/images/fireReport/icon/close.png" alt="">
        <img class="mousein" src="/images/fireReport/icon/close2.png" alt="">关闭
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:"previewReport",
  data(){
    return{
      countDown:0,
    }
  },
  props: ["statisticsInfo"],
  methods:{
    // 关闭预览
    closePreview(){
      this.$emit('closePreview', false)
    },
    getPdf(){
      console.log('下载日报')
      let obj = {
        endTime:this.statisticsInfo.contentInfo.endTime,
        firNum:this.statisticsInfo.contentInfo.fireNum,
        fireInfos:this.statisticsInfo.fireInfoList,
        headerBig:this.statisticsInfo.template.headerBig,
        placeNum:[...this.statisticsInfo.tableList[1].data[0]],
        placetop0:this.statisticsInfo.suggest.placetop[0],
        placetop1:this.statisticsInfo.suggest.placetop[1],
        reportCode:this.statisticsInfo.template.reportCode,
        reportDate:this.statisticsInfo.template.reportTime,
        reportUnit:this.statisticsInfo.template.reportUnit,
        reporter:this.statisticsInfo.template.reporter,
        reporterUnit:this.statisticsInfo.template.reporterUnit,
        startTime:this.statisticsInfo.contentInfo.startTime,
        timeCount:this.statisticsInfo.tableList[0].data[0],
        timeTop0:this.statisticsInfo.suggest.timeTop[0],
        timeTop1:this.statisticsInfo.suggest.timeTop[1],
        typeNum:this.statisticsInfo.tableList[2].data[0],
        typeTop0:this.statisticsInfo.suggest.typeTop[0],
        typeTop1:this.statisticsInfo.suggest.typeTop[1],
        suggestText:this.statisticsInfo.suggestText
      }
      axios({
        url:`${window.sjzxUrl}/api/special-report/fireDay/create`,
        method:"post",
        data:obj,
        responseType: 'blob'
      }).then(res=>{
        // window.open(`${window.huoqingApiUrl}/api/special-report/download/${res.data}`, '_blank');
        this.download(res.data);
      });
      // axios({
      //   url:`${window.sjzxUrl}/api/special-report/fireDay/create`,
      //   method:"post",
      //   data:obj
      // }).then(res=>{
      //   window.open(`${window.sjzxUrl}/api/special-report/download/${res.data}`, '_blank');
      // });
    },
    // 下载文件
    download (data) {
      let url = URL.createObjectURL(new Blob([data],{type: "application/octet-stream;charset=utf-8 "}))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', "海南省森林防火火情简报.docx")
      document.body.appendChild(link)
      link.click()
    },
  },
}
</script>

<style lang="stylus">
.previewReport{
  .pdf{
    .content-first .firstItem .tableBox{
      width:95%;
      margin:auto;
      display: flex;
      justify-content: space-between;
      .elTable{
        border:0;
        border-left:1px solid #000;
        border-top:1px solid #000;
        margin-bottom:20px;
        th, tr, td{
          color:#000;
          border: 0;
          border-right:1px solid #000;
          border-bottom:1px solid #000;
          font-size: 16px;
          font-family: FangSong;
          div.cell{
              color:#000;
          }
        }
        tbody tr:hover>td { 
          background-color:unset!important
        }
      }
    }
  }
  .funcBtn{
    color:#fff;
    padding-top:5px;
    position: fixed;
    bottom: 50px;
    right: 130px;
    margin: auto;
    width: 250px;
    height: 30px;
    text-align :center;
    p{
      float:right;
      margin-left: 20px;
      cursor: pointer;
      width: 102px;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      opacity: 1;
      background: #042039;
      border: 1px solid #17d0ff;
      border-radius: 3px;
      color: #17d0ff;
      img{
        width:18px;
        height:18px;
        vertical-align: middle;
        margin-right:8px;
      }
      .mousein{
        display:none;
      }
    }
    p:hover{
      background: #05718c;
      color:#fff;
      .mousein{
        display:inline-block;
      }
      .mouseout{
        display:none;
      }
    }
  }
}
</style>
<style lang="stylus" scoped>
.previewReport{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,.9);
    position:fixed;
    z-index:9;
    left:0;
    right:0;
    bottom:0;
    top:0px;
    margin:auto;
  .pdf{
    background:#fff;
    width:60%;
    height:1000px;
    overflow: auto;
    text-align: left;
    box-sizing: border-box;
    padding:100px;
    font-family: FangSong;
    line-height:46px;
    font-size: 21px;
    color:#000;
    margin: 0 auto;
    &::-webkit-scrollbar {
      display: none;
    }
    h2, h3, h4{
      font-weight: 900;
      color:#000;
    }
    h3{
      font-family: SimHei;
      color:#000;
    }
    h4{
      text-indent: 2em;
      color:#000;
    }
    .pdf-header{
      border-bottom: 2px solid #fe0000;
      text-align: center;
      color:#000;
      h1{
        font-size: 48px;
        color:#ff0000;
        font-family: SimHei;
      }
      p{
        font-size: 21px;
        line-height:21px;
        margin: 68px 0 70px;
        color:#000;
      }
      .headerLine{
        font-size: 21px;
        line-height:45px;
        display: flex;
        justify-content: space-between;
        border-bottom:5px solid #fe0000;
        margin-bottom:1px;
        color:#000;
        span{
            color:#000;
        }
      }
    }
    .pdf-content{
      .content-first{
        .baseDescribe{
          text-indent: 2em;
          color:#000;
          span{
              color:#000;
          }
        }
        .firstItem{
        div{
            color:#000;
            p{
                color:#000;
            }
        }
          p{
            text-align: center;
            font-size: 16px;
            line-height:22px;
            color:#000;
          }
        }
      }
      .content-second{
        div{
          font-size:21px;
          text-indent: 2em;
          color:#000;
        }
      }
      .content-third{
          .thirdItem{
              p{
                  span{
                      color:#000;
                  }
              }
          }
        div{
          p{
            font-size:21px;
            text-indent: 2em;
            color:#000;
          }
          .remark{
            font-weight: 900;
            color:#000;
          }
        }
      }
    }
    .pdf-footer{
      padding-top:1px;
      border-top: 2px solid #fe0000;
      color:#000;
      .footerLine{
        font-size: 21px;
        display: flex;
        justify-content: space-between;
        border-top:5px solid #fe0000;
        color:#000;
      }
    }
  }
}
</style>